<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
	<!-- Load pdfmake, jszip lib files -->
	<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.20/build/pdfmake.min.js">	</script>
	<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.20/build/vfs_fonts.js"></script>
	<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
	
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Pivot Multiple Aggregates</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
	<button id="csv">CSV</button>
	<button id="excel">Excel</button>
	<button id="pdf">PDF</button>

    <script type="text/javascript"> 
    
        jQuery(document).ready(function () {

            jQuery("#jqGrid").jqGrid('jqPivot',
            "data.json",
            // pivot options
            {
                xDimension: [
                    { dataName: "CategoryName" },
                    { dataName: "ProductName" }
                ],
                groupSummaryPos: "footer",
                aggregates: [
                    { 
                        formatter: "number",
                        label: "Sum Price",
                        width: 80,
                        align: "right",
                        aggregator: "sum",
                        summaryType: "sum",
                        member: "Price"
                    },
                    {
                        formatter: "number",
                        label: "Sum Qty",
                        width: 80,
                        align: "right",
                        aggregator: "sum",
                        summaryType: "sum",
                        member: "Quantity"
                    }
                ],
                yDimension: [
                    { "dataName": "Country" }
                ],
				rowTotals : true,
				colTotals : true
            },
            // grid options
            {
                width: 780,
                height: "200",
                rowNum: 10,
				rowList : ["10:10","20:20","30:30","1000:All"],
                pager: "#jqGridPager",
                caption: "Multiple aggregates"
            });
			$("#pdf").on("click", function(){
				$('#jqGrid').jqGrid('exportToPdf');
			});
			$("#excel").on("click", function(){
				$('#jqGrid').jqGrid('exportToExcel');
			});
			$("#csv").on("click", function(){
				$('#jqGrid').jqGrid('exportToCsv');
			});
			
        });

    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="font-size: 12px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
    <script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
    <script type="text/ecmascript" src="../../../js/codetabs.js"></script><script type="text/ecmascript" src="../../../js/themeswitchertool.js"></script>
    
    
    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>

</body>
</html>